// banner 图片轮播
(function () {

    //防抖
 function debounce(callback, delay = 200) {
   let timer = 0; //闭包解决  timer始终只有一个
   return function (e) {
     //鼠标移动的时候，执行！,里头this就只是oBox
   //   console.log(this); //box
     let self = this;
     clearTimeout(timer);
     timer = setTimeout(function () {
       callback.bind(self, e)();
     }, delay);
   };
 }


   $.fn.extend({
      opacitySwiper() {
          let imgIndex = 0;
          let self = this;
          //jq内置了each ,等价于 forEach
          this.find("ul>li").each(function (index, item) {
              // console.log(index,item);
              $(item).css({
                  opacity: index == imgIndex ? 1 : 0
              });

              self.find("ol>li").eq(index).css({
                  opacity: index == imgIndex ? 1 : 0.3
              })

          })

          this.timer = setInterval(() => {
              imgIndex++;
              if (imgIndex > 4) {
                  imgIndex = 0;
              }

              this.find("ul>li").each(function (index, item) {
                  // console.log(index,item);
                  $(item).animate({
                      opacity: index == imgIndex ? 1 : 0
                  },1000)

                  self.find("ol>li").eq(index).animate({
                      opacity: index == imgIndex ? 1 : 0.3
                  },1000)
                  

              })

          }, 1500);

         //  鼠标滑入暂停 左右箭头出现 定时器停止
          this.mouseenter(() => {
              clearInterval(this.timer);
              self.find(".arr").show()
          }).mouseleave(() => {
            self.find(".arr").hide()
              this.timer = setInterval(() => {
                  imgIndex++;
                  if (imgIndex > 4) {
                      imgIndex = 0;
                  }
                  
                  this.find("ul>li").each(function (index, item) {
                      // console.log(index,item);
                      $(item).animate({
                          opacity: index == imgIndex ? 1 : 0
                      });

                      self.find("ol>li").eq(index).animate({
                          opacity: index == imgIndex ? 1 : 0.3
                      })
                  })

              }, 1500);
          })

         //  点击左边边箭头时 imgIndex--   用了防抖
         console.log(this);
          $(this).find(".left").click(debounce(function(){
            imgIndex--
            if(imgIndex<0){
               imgIndex=4
            }
            self.find("ul>li").each(function (index, item) {
               // console.log(index,item);
               $(item).animate({
                   opacity: index == imgIndex ? 1 : 0
               });

               self.find("ol>li").eq(index).animate({
                   opacity: index == imgIndex ? 1 : 0.3
               })
           })
          },500))

           //  点击右边箭头时 imgIndex++  用了防抖
           $(this).find(".right").click(debounce(function(){
            imgIndex++
            if(imgIndex>4){
               imgIndex=0
            }
            self.find("ul>li").each(function (index, item) {
               // console.log(index,item);
               $(item).animate({
                   opacity: index == imgIndex ? 1 : 0
               });

               self.find("ol>li").eq(index).addClass("current")
           })
          },500))

          //点击下面ol标签事件   用了防抖
          this.find("ol>li").click(debounce(function () {
              imgIndex = $(this).index();
              self.find("ul>li").each(function (index, item) {
                  // console.log(index,item);
                  $(item).animate({
                      opacity: index == imgIndex ? 1 : 0
                  });

                  self.find("ol>li").eq(index).animate({
                      opacity: index == imgIndex ? 1 : 0.3,
                      backgroundColor:index == imgIndex ? "red" : ""
                  })
              })
          },500))

      }
  })

$(function () {
  $('#all').opacitySwiper();
})

 

   // 导航踏步栏切换
   $.fn.extend({
     mouseTab1() {
       this.$oCostume = this.find(".header-con").children();
       this.$oCostume.each((index, item) => {
         $(item) .on("mouseenter", () => {
            $(item).find("ul").show()
            $(item).addClass("current").siblings().removeClass("current");
           }).mouseleave(()=>{
            $(item).find("ul").hide()
            $(item).removeClass("current")
           })
           $(item).find("li").each((index,item)=>{
            $(item).mouseenter(()=>{
                 $(item).addClass("current").siblings().removeClass("current");
            }).mouseleave(()=>{
               $(item).removeClass("current")
            })
           })
       });
     },
   });
 $(function () {
    $(".headerbx").mouseTab1()
  });
 
  // 商品踏步栏切换
  $.fn.extend({
    mouseTab(list, box) {
      //  console.log(this);
      this.$oCostume = this.find(list).children();
      this.$ocbxSp = this.find(box).children();
      this.$oCostume.each((index, item) => {
        $(item).on("mouseenter", () => {
          this.$ocbxSp.parent().show();
          this.$oCostume
            .eq(index)
            .addClass("current")
            .siblings()
            .removeClass("current");
          this.$ocbxSp.eq(index).show().siblings().hide();
        });
      });
    },
  });
  $(function () {
    $(".c-bx").mouseTab(".costume ", ".c-bxSp");
  });
//  导航栏漂浮 和册边栏隐藏和出现
$(window).on("load",function(){
$(document).on("scroll",function(){
   let Stop=$(this).scrollTop()
   if(Stop>0){
   $(this).find(".headerbx").css({
      position:"fixed",
      top:0,
      zIndex:9
      
   })
   $(".banner").css({
      marginTop:$(".headerbx").height()
   })
   }
   if(Stop>800){
      $(".box2").show() 
   }else{
      $(".box2").hide()
   }
})
})


// 获取到sessionStorage显示我的用户名
// sessionStorage.setItem("currentUser", JSON.stringify(oLog));
$(window).on("load",function(){
  var oLog= JSON.parse(sessionStorage.getItem("currentUser")||"[]")
   $(".user-btn1").text(oLog.name)
})

// 鼠标移入商品变大和添加变框
$.fn.extend({
   changeColor(){
      var oDl=this.find("dl")
       $(oDl).each((index,item)=>{ 
         // console.log( $(item));
          $(item).on("mouseenter",()=>{
             $(item).addClass("list99").siblings().removeClass("list99").animate({
               height: 250,
               width: 175
             }).stop()
          }).on("mouseleave",()=>{
            $(item).removeClass("list99")
          })
       })
      }
})
$(function(){
   $(".c-bxSp").changeColor()
})

 })();
 

 $(function(){
    // 点击到登入界面
$(".user-btn1").on("click",function(){
   location="reigster.html"
})
$( function(){
   // 获取本地数据 根据里面的数据条数把显示到购物车有几条数据
   let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
   $(window).on("load", function () {
      Shoppinglist.forEach((item, index) => {
    $(".user-btn2 span").text(index+1)
         console.log(item);
      })

   })
})
 })